import { $ } from "../common/utils.js";
const template = (opts= {}) => {
    const autoCompleteTpl = `
        <div id="no-autocomplete">
            <input type="text">
            <input type="password">
        </div>
    `;
    const autoCompleteAdapter = opts.autocomplete ? "" : autoCompleteTpl;
    const autoCompleteValue = opts.autocomplete ? "on" : "off";

    const tpl = `
        <div id="login-wrapper">
            <p id="login-error" class="login-error"></p>
            <form id="login-form" onsubmit="return false;">
                ${ autoCompleteAdapter }
                <label class="login-account-wrapper">
                    <span class="account-label">${ opts.accountLabel }</span>
                    <input id="login-account" name="account" type="text"
                    placeholder="${ opts.accountPlaceHolder }"
                    autocomplete="${ autoCompleteValue }"
                    valid="present"/>
                    <span id="clear-account" class="del"></span>
                </label>    

                <label class="login-account-wrapper">
                    <span class="password-label">${ opts.passwordLabel }</span>
                    <input id="login-password" name="password" type="password"
                    placeholder="${ opts.passwordPlaceHolder }"
                    autocomplete="${ autoCompleteValue }"
                    valid="present"/>
                </label>
                
                <label class="login-remember-wrapper" style="display: ${ opts.showRemember }">
                    <span>记住密码：</span>
                    <input id="login-remember" name="remember" type="checkbox">
                </label>
                
                <input id="login-btn" class="login-btn" type="submit" value="${ opts.loginBtnText }"/>  
                <div class="login-extra-wrapper">
                    <a href="forget.html">忘记密码</a>
                    <a href="register-mobile.html">免费注册</a>
                </div>   
            </form>
        </div>`;
    return tpl;
};

export default (conf= {}) => {

    conf.container.innerHTML = template(conf);
    const $noAutoCompelete = $("no-autocomplete");
    if ($noAutoCompelete) {
        $noAutoCompelete.style.opacity = "0";
        $noAutoCompelete.style.height = "0";
    }
}